<template>
  <div style="padding:30px;">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="仓库名">
        <el-input v-model="form.name" placeholder="仓库名"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="form.address" placeholder="地址"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
          <el-button type="primary" size="mini" @click="clearFilter">清除所有过滤器</el-button>
          <el-col :span="3"><el-button size="mini" type="success" @click="adds()">新增</el-button></el-col>
          <el-table ref="filterTable" :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号" width="width: 20%">
            </el-table-column>
            <el-table-column prop="name" label="仓库名" width="width: 20%">
            </el-table-column>
            <el-table-column prop="address" width="width: 20%" label="地址">
            </el-table-column>
            <el-table-column prop="tagstandby1" label="状态" width="width: 20%"
              :filters="[{ text: '开放', value: '开放' },{ text: '关闭', value: '关闭' }]"
              :filter-method="filterTag" filter-placement="bottom-end">
              <template slot-scope="scope">
                <el-tag :type="scope.row.standby1 === '关闭' ? 'danger' : 'success'"
                  disable-transitions>{{scope.row.standby1}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="width: 20%">
              <template slot-scope="scope">
                <el-button @click="setDepot(scope.row)" type="success" size="small">编辑</el-button>
                <el-button @click="delDepot(scope.row)" type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="block">
            <el-tag class="demonstration">调整每页显示条数</el-tag>
            <el-pagination
             background layout="sizes,prev, pager, next"
             :total="count"
             :page-sizes="[3, 4, 5, 6]"
              :page-size="3"
               @current-change="getAllByLimit"
                @size-change="handleSizeChange">
            </el-pagination>
          </div>


            <el-dialog title="新增仓库" :visible.sync="addshow">
            <el-form :model="addform">
                <el-form-item label="仓库名">
                  <el-input v-model="addform.name" placeholder="仓库名"></el-input>
                </el-form-item>
              <el-form-item label="地址">
                <el-input v-model="addform.address" placeholder="地址"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                  <el-radio-group v-model="addform.state">
                     <el-radio label="开放">开放</el-radio>
                     <el-radio label="关闭">关闭</el-radio>
                  </el-radio-group>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="pushs()">提 交</el-button>
                <el-button  @click="err()">取 消</el-button>
            </div>
            </el-dialog>

            <el-dialog title="修改仓库" :visible.sync="setshow">
            <el-form :model="setform">
                <el-form-item label="仓库名">
                  <el-input v-model="setform.name" placeholder="仓库名"></el-input>
                </el-form-item>
              <el-form-item label="地址">
                <el-input v-model="setform.address" placeholder="地址"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-radio-group v-model="setform.state" @change="$forceUpdate()">
                   <el-radio label="开放"></el-radio>
                   <el-radio label="关闭"></el-radio>
                </el-radio-group>
              </el-form-item>
               <el-input v-model="setform.id" type="hidden"></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addpush()">提 交</el-button>
                <el-button  @click="err()">取 消</el-button>
            </div>
            </el-dialog>
  </div>
</template>

<script>
  import {getAll,set,del,add} from '@/api/depot'

  export default {
    data() {
      return {
        form: {
          name: '',
          address: ''
        },

        page: 1,
        limit: 3,
        tableData: [],
        count: 4,
        addshow:false,
        addform: {
          name: '',
          address: '',
          state:''
        },
        setshow:false,
        setform: {
          id:'',
          name: '',
          address: '',
          state:''
        },
        isLimit:false
      }
    },
    created() {
      this.getAllByLimit(1);
      
    },
    methods: {
      //分页查询所有
      getAllByLimit(val) { // 修改当前页所触发的函数
      this.page=val;
       if(this.isLimit){
         return new Promise((resolve, reject) => {
           getAll({
             'limit': this.limit,
             'page': val,
             'name': this.form.name,
             'name2':this.form.address
             }).then(response => {
             const {data,count} = response
             this.tableData = data;
             this.count = count;
             resolve()
           }).catch(error => {
             reject(error)
           })
         })
       }else{
         return new Promise((resolve, reject) => {
           getAll({'limit': this.limit,'page': val}).then(response => {
             const {data,count} = response
             this.tableData = data;
             this.count = count;
             resolve()
           }).catch(error => {
             reject(error)
           })
         })
       }
      },
      //当limit修改时分页查询所有
      handleSizeChange(val){
        this.limit=val;
        if(this.isLimit){
          return new Promise((resolve, reject) => {
            getAll({'limit': val,
            'page': this.page,
            'name': this.form.name,
            'name2':this.form.address
            }).then(response => {
              const {data,count} = response
              this.tableData = data;
              resolve()
            }).catch(error => {
              reject(error)
            })
          })
        }else{
          return new Promise((resolve, reject) => {
            getAll({'limit': val,'page': this.page}).then(response => {
              const {data,count} = response
              this.tableData = data;
              resolve()
            }).catch(error => {
              reject(error)
            })
          })
        }

      },
      //模糊查询表单提交
      onSubmit() {
        this.isLimit=true;
        return new Promise((resolve, reject) => {
          getAll({
            'limit': this.limit,
            'page': this.page,
            'name': this.form.name,
            'name2':this.form.address
          }).then(response => {
            const {data,count} = response
            this.tableData = data;
            this.count = count;
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      //添加按钮事件
       adds(){
            this.addshow=true;
      },
     //取消让弹框隐藏
      err(){
            this.addshow=false;
            this.setshow=false;
      },
      setDepot(row){
          this.setshow=true;
          this.setform=row;
          this.setform.state=row.standby1;
      },
      //提交添加
      pushs() {
        return new Promise((resolve, reject) => {
          add({
            'name': this.addform.name,
            'address':this.addform.address,
            'standby1' :this.addform.state
          }).then(response => {
            if(response.data){
              this.$message({
                  message: response.msg,
                 type: 'success'
              });
              }else{
                this.$message({
                    showClose: true,
                    message: response.msg,
                    type: 'error'
               });
              }
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      //提交修改
      addpush() {
        return new Promise((resolve, reject) => {
          console.log(this.setform);
          set({
            'id' : this.setform.id,
            'name': this.setform.name,
            'address':this.setform.address,
            'standby1' :this.setform.state
          }).then(response => {
            console.log(response);
            if(response.data){
              this.$message({
                  message: response.msg,
                 type: 'success',
                onClose:  () =>{
                  this.err();
                }
              });
              }else{
                this.$message({
                    showClose: true,
                    message: response.msg,
                    type: 'error'
               });
              }
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      delDepot(row) {
        this.$confirm('此操作将永久删除该仓库, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(response => {
           return new Promise((resolve, reject) => {
             del({'id': row.id}).then(response => {
              if(response.data){
                this.$message({
                          message: response.msg,
                          type: 'success',
                          onClose:  () =>{
                            location.reload();
                          }
                        });
              }else{
                 this.$message.error(response.msg);
              }
               resolve()
             }).catch(error => {
               reject(error)
             })
           })
            resolve()
          }).catch(error => {
            reject(error)
          })
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      filterTag(value, row) {
        return row.standby1 === value;
      }
    }
  }
</script>

<style>

</style>
